<template>
  <div>
    <!-- 上面的搜索和下拉选择框 -->
    <div class="searchTop">
      <!-- 筛选查询 查询结果 -->
      <div class="fliterSearch">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选查询</span>
        </div>
        <div><Button type="text">查询结果</Button></div>
      </div>
      <!-- 报销人 报销类型报销状态 -->
      <div class="searchResult">
        <template>
          <div>
            <span>报销人：</span
            ><Input v-model="value" style="width: 160px"></Input>
          </div>
          <div>
            <span>报销类型：</span>
            <Select v-model="model1" style="width: 160px">
              <Option
                v-for="(item, index) in applyTypeList"
                :value="item.value"
                :key="index"
                >{{ item.label }}</Option
              >
            </Select>
          </div>
          <div>
            <span>报销状态：</span>
            <Select v-model="model1" style="width: 160px">
              <Option
                v-for="(item, index) in applyStateList"
                :value="item.value"
                :key="index"
                >{{ item.label }}</Option
              >
            </Select>
          </div>
        </template>
      </div>
    </div>
    <!-- 页面下方的数据展示表格  -->
    <!-- 新增数据 -->
    <div class="fliterSearch dataList">
      <div>
        <i class="el-icon-s-grid"></i>
        <span>数据列表</span>
      </div>
      <router-link to="/admin/addmoney"><Button>新增</Button></router-link>
    </div>
    <!-- 数据展示部分 -->
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="num" label="序号" width="120"> </el-table-column>
        <el-table-column prop="type" label="报销类型" width="160">
        </el-table-column>
        <el-table-column prop="money" label="金额（元）"> </el-table-column>
        <el-table-column prop="name" label="报销人"> </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="date" label="报销日期"> </el-table-column>
        <el-table-column prop="handler" label="操作" width="300">
         
             <template slot-scope="{row}">
                <el-button
              :plain="true"
              type="primary"
              size="mini"
              :disabled="row.status === '已报销'"
              @click="accomplish(row.num)"
              >完成报销</el-button
            >

             <el-button
              type="text"
              size="mini"
              @click="$router.push({
                path:'/admin/changem',
                query:{
                  num:row.num
                }
              })"

            >
              修改
            </el-button>
            <el-button type="text" @click="open(row.num)">详情</el-button>
            </template>
           
           
        </el-table-column>
      </el-table>
    </template>
    <template>
      <el-pagination
        @click="onPageChange"
        background
        layout="prev, pager, next"
        :total="100"
        :current-page="pageNumber"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </template>

    <!-- 
      详情dialog
     -->
    <el-dialog
      title="报销详细信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
     <detail :num="num" @close="closeDialog" />
    </el-dialog>
  </div>
</template>

<script>
import addmoney from "./ui/addmoney.vue";
import detail from './ui/detail.vue'
import {mapState} from 'vuex'
export default {
  components: { addmoney, detail},
  data() {
    return {
      num:'',
      pageNumber:1,
      value: "",
      applyTypeList: [
        {
          value: "eatMoney",
          label: "餐费",
        },
        {
          value: "carMoney",
          label: "打车费",
        },
        {
          value: "otherMoney",
          label: "其他费用",
        },
      ],
      applyStateList: [
        {
          value: 1,
          label: "已报销",
        },
        {
          value: 0,
          label: "未报销",
        },
      ],
      model1: "",
      dialogVisible: false,

    };
  },
  mounted() {
    this.onPageChange();
    
  },
  computed:{
    tableData(){
      return this.$store.state.money.moneyList.userData
    }
  },
  methods: {
    handleCurrentChange(val){
      this.pageNumber = val
      this.onPageChange()
    },
    async onPageChange(page = 1) {
      this.$store.dispatch("money/getUserList", this.pageNumber);
    },
    accomplish(num) {
      console.log(num);
      this.$store.commit('money/updateStatue',num)
      this.$message.success("完成报销！");
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    open(num) {
      console.log(num);
      this.num = num
      this.dialogVisible = true
    },
    closeDialog(){
      this.dialogVisible = false
    }
  },
};
</script>

<style lang="scss" scoped>
.searchTop {
  width: 70vw;
  height: 100px;
}
.fliterSearch {
  width: 70vw;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.ivu-btn-ghost {
  color: #63b9be;
}
.searchResult {
  width: 80%;
  height: 50px;
  padding-left: 20px;
  display: flex;
  justify-content: space-around;
}
.dataList {
  width: 100%;
  border-top: 1px solid #ddd;
  padding-right: 120px;
}
.ivu-btn {
  color: #fff;
  border: 1px solid #ddd;
  background-color: #63b9be;
}
.el-button--text {
  padding: 7px 15px;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  font-size: 12px;
  border-radius: 3px;
}
.el-pagination {
  width: 40vw;
  float: right;
}
</style>